<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>My Column-随心写作，自由表达</title>
    <link rel="shortcut icon" th:href="@{/images/column-favicon.png}">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" th:href="@{/css/my-column.css}"/>
    <link rel="stylesheet" th:href="@{/plugins/sweetalert/sweetalert.css}"/>
    <link th:href="@{/plugins/bootstrap/bootstrap-modal.css}" rel="stylesheet">
</head>

<body class="LightGreyBg-body">
<div id="root">
    <div class="column-app">
        <main role="main" class="App-main">
            <div class="ColumnHome">
                <div class="ColumnPageHeader-Wrapper">
                    <div>
                        <div class="ColumnPageHeader" style="">
                            <div class="ColumnPageHeader-content">
                                <a th:href="@{/index}">
                                    <img th:src="@{/images/my-column-logo.png}">
                                </a>
                                <i class="ColumnPageHeader-Line"></i>
                                <div class="ColumnPageHeader-Title">
                                    <div class="ColumnPageHeader-TitleName">
                                        <span class="ColumnPageHeader-TitleMeta">个人中心</span>
                                    </div>
                                </div>
                                <div class="ColumnPageHeader-Button">
                                    <a th:href="@{/articleEdit}">
                                        <button type="button" class="Button ColumnPageHeader-WriteButton Button--blue">
                                            <img class="edit-icon" th:src="@{/images/edit.png}">
                                            写文章
                                        </button>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ProfileHeader">
                    <div class="Card">
                        <div class="ProfileHeader-userCover">
                            <div class="UserCoverEditor">
                                <div>
                                    <div class="UserCover"><img class="UserCover-image"
                                                                src="images/personal-header.jpg"
                                                                alt="用户封面"></div>
                                </div>
                            </div>
                        </div>
                        <div class="ProfileHeader-wrapper">
                            <div class="ProfileHeader-main">
                                <div class="UserAvatarEditor ProfileHeader-avatar" style="top: -25px;">
                                    <div class="UserAvatar"><img class="Avatar Avatar--large UserAvatar-inner"
                                                                 width="160" height="160"
                                                                 th:src="@{${session.myColumnUser.headImgUrl}}">
                                    </div>
                                </div>
                                <div class="ProfileHeader-content">
                                    <div class="ProfileHeader-contentHead"><h1 class="ProfileHeader-title"><span
                                            class="ProfileHeader-name"
                                            th:text="${session.myColumnUser.loginName}">十三</span></h1></div>
                                    <div class="ProfileHeader-contentBody"
                                         style="overflow: hidden; transition: height 300ms ease-out 0s; height: 129px;">
                                        <div>
                                            <div class="ProfileHeader-detail">
                                                <div class="ProfileHeader-detailItem"><span
                                                        class="ProfileHeader-detailLabel">居住地</span>
                                                    <div class="ProfileHeader-detailValue"><span
                                                            th:text="${'现居'+session.myColumnUser.address}">现居杭州</span>
                                                    </div>
                                                </div>
                                                <div class="ProfileHeader-detailItem"><span
                                                        class="ProfileHeader-detailLabel">所在行业</span>
                                                    <div class="ProfileHeader-detailValue"
                                                         th:text="${session.myColumnUser.profession}">互联网
                                                    </div>
                                                </div>
                                                <div class="ProfileHeader-detailItem"><span
                                                        class="ProfileHeader-detailLabel">个人简介</span>
                                                    <div class="ztext ProfileHeader-detailValue"
                                                         th:text="${session.myColumnUser.introduce}">我不怕千万人阻挡，只怕自己投降！
                                                    </div>
                                                </div>
                                                <input type="hidden" id="myColumnId" th:value="${columnId}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ProfileHeader-contentFooter">
                                        <div class="ProfileButtonGroup ProfileHeader-buttons"
                                             style="float: right; margin: 6px 6px 6px 6px;">
                                            <button type="button" class="Button Button--blue"
                                                    onclick="toColumnPage()">我的专栏
                                            </button>
                                            <button type="button" class="Button Button--blue"
                                                    onclick="openUpdateModal()">编辑个人资料
                                            </button>
                                            <button type="button" class="Button Button--grey" onclick="logOut()">退出登录
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="content">
                            <!-- 模态框（Modal） -->
                            <div class="modal fade" id="personalInfoModal" tabindex="-1" role="dialog"
                                 aria-labelledby="personalInfoModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                                    aria-hidden="true">&times;</span></button>
                                            <h6 class="modal-title" id="personalInfoModalLabel">个人信息修改</h6>
                                        </div>
                                        <div class="modal-body">
                                            <form id="personalInfoForm">
                                                <div class="form-group">
                                                    <img id="headImgUrl"
                                                         th:src="@{${session.myColumnUser.headImgUrl}}"
                                                         style="width:80px ;height: 80px;display:block;">
                                                </div>
                                                <div class="form-group">
                                                    <button class="Button Button--blue" style="margin-bottom: 5px;"
                                                            id="uploadHeadImg">
                                                        上传头像
                                                    </button>
                                                </div>
                                                <div class="form-group">
                                                    <label for="profession" class="control-label">行业:</label>
                                                    <input type="hidden" id="userId">
                                                    <input type="text" class="form-control" id="profession"
                                                           name="profession"
                                                           placeholder="请输入所在行业"
                                                           required="true">
                                                </div>
                                                <div class="form-group">
                                                    <label for="introduce" class="control-label">个人简介:</label>
                                                    <input type="text" class="form-control" id="introduce"
                                                           name="introduce"
                                                           placeholder="请输入个人简介"
                                                           required="true">
                                                </div>
                                                <div class="form-group">
                                                    <label for="address" class="control-label">居住地:</label>
                                                    <input type="text" class="form-control" id="address" name="address"
                                                           placeholder="请输入居住地"
                                                           required="true">
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="Button Button--grey" data-dismiss="modal">取消
                                            </button>
                                            <button type="button" class="Button Button--blue" id="saveButton">确认
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.modal -->
                        </div>


                    </div>
                </div>


            </div>
        </main>
    </div>
</div>
</body>
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/plugins/bootstrap/bootstrap3.js}"></script>
<script th:src="@{/js/public.js}"></script>
<script th:src="@{/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/plugins/ajaxupload/ajaxupload.js}" type="text/javascript"></script>
<script type="text/javascript">


    // 图片上传插件初始化
    new AjaxUpload('#uploadHeadImg', {
        action: '/uploadFile',
        name: 'file',
        autoSubmit: true,
        responseType: "json",
        onSubmit: function (file, extension) {
            if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                alert('只支持jpg、png、gif格式的文件！');
                return false;
            }
        },
        onComplete: function (file, r) {
            if (r != null && r.resultCode == 200) {
                $("#headImgUrl").attr("src", r.data);
                return false;
            } else {
                alert("error");
            }
        }
    });

    function toColumnPage() {
        // 跳转至我的专栏页面
        window.location.href = "/myColumnPage";
    }

    /**
     * 打开编辑框
     */

    function openUpdateModal() {
        $('#personalInfoModal').modal('show');
    }

    /**
     * 退出登录
     */
    function logOut() {
        swal({
            title: "确认弹框",
            text: "确认要退出登录吗?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((flag) => {
                if (flag) {
                    window.location.href = '/logout';
                }
            }
        );
    }

    //绑定modal上的保存按钮
    $('#saveButton').click(function () {
        var address = $("#address").val();
        if (address.trim().length < 2) {
            swal("请输入正确的居住地", {
                icon: "error",
            });
            return;
        }
        var introduce = $("#introduce").val();
        if (introduce.trim().length < 4) {
            swal("请输入正确的个人介绍", {
                icon: "error",
            });
            return;
        }
        var profession = $("#profession").val();
        if (profession.trim().length < 2) {
            swal("请输入正确的行业信息", {
                icon: "error",
            });
            return;
        }
        var headImg = $('#headImgUrl')[0].src;
        if (headImg.trim().length < 2) {
            swal("请上传头像", {
                icon: "error",
            });
            return;
        }
        var userId = $("#userId").val();
        var data = {
            "userId": userId,
            "address": address,
            "headImgUrl": headImg,
            "introduce": introduce,
            "profession": profession
        };
        $.ajax({
            type: 'POST',//方法类型
            url: '/updateUserInfo',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (result) {
                if (result.resultCode == 200) {
                    $('#personalInfoModal').modal('hide');
                    window.location.reload();
                } else {
                    $('#personalInfoModal').modal('hide');
                    alert(result.message);
                }
                ;
            },
            error: function () {
                alert('操作失败');
            }
        });
    });
</script>
</html>